<template>
    <div class="goods-info">
        <!-- 调用轮播组件 -->
        <swipeJia :swipelist="list"></swipeJia>
        
        <button @click="backOff">后退</button>
        <button @click="golink()">后退2步</button>
        <button @click="forwardlink()">向前</button>

        

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    这是一个最简单的卡片视图控件；卡片视图常用来显示完整独立的一段信息，比如一篇文章的预览图、作者信息、点赞数量等
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
                </div>
            </div>
            <div class="mui-card-footer">页脚</div>
        </div>
        
        <div class="mui-card">
            <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../../images/news/shuijiao.jpg)"></div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>Posted on January 18, 2016</p>
                    <p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Read more</a>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header mui-card-media">
                <img :src="icon" />
                <div class="mui-media-body">
                    小M
                    <p>发表于 2016-06-30 15:30</p>
                </div>
                <!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
                <h2>小M</h2>
                <p>发表于 2016-06-30 15:30</p>-->
            </div>
            <div class="mui-card-content" >
                <img :src="img" alt="" width="100%"/>
            </div>
            <div class="mui-card-footer">
                <a class="mui-card-link">Like</a>
                <a class="mui-card-link">Comment</a>
                <a class="mui-card-link">Read more</a>
            </div>
        </div>

    </div>
</template>

<script>
import swipe from '../subcomponents/swipe.vue'


export default {
    data(){
        return {
            icon: '../../images/icon/timg.jpeg',
            img: '../../images/news/cbd.jpg',
            list: [
                {id: 1,name: '1111',img: '../../images/news/cbd.jpg'},
                {id: 2,name: '222',img: '../../images/2.jpg'},
                {id: 3,name: '33',img: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg'},
                {id: 4,name: '4444',img: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg'},
            ]
        }
    },
    components: { "swipeJia": swipe},
    created(){

    },
    mounted(){
        
    },
    methods:{
        backOff(){
            this.$router.back()
        },
        golink(){
            this.$router.go(-2)
        },
        forwardlink(){
            this.$router.forward()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>